{extend name="public/base" /}

{block name="title"}<title>事件库管理</title>{/block}

{block name="pjax_container"}
<style>
    .modal-content {
        margin-top: 150px;
        /*width: 600px;*/
        /*height: 690px;*/

    }
    .layui-layer-content{
        padding: 15px;
    }
    .modal-body {
        padding: 27px;
        /*width: 856px;*/
        /*height: 570px;*/
        display: flex;
    }
    .col-sm-2{
        width: 23.666667%;
        height: 33px;
        line-height: 40px;
        padding-top: 15px;
    }
    .col-sm-7{
        padding-top: 15px;
    }
    tr>th,td{
        text-align: center;
    }
      tr>td>a{
          display: inline-block;
        padding: 5px !important;
        margin-left: 5px;
      }
      
.content-header>.breadcrumb>li{
    color: #999;
}
.content-header>.breadcrumb>.active{
    color: #666;
}
.content-header{
    height: 51px;
 
}
.btn-primary{
      background-color: #1890FF;
    color: #fff;
    border: none;
    border-radius: 6px !important;
    margin-left: 15px;
    padding: 5px 10px; 
    line-height: 24px;
}
.btn-danger{margin-left: 15px;}
.box-primary{
  border-top-color: #ecf0f5 !important;
  border-top-width: 16px;
  
}
.btn-primary:hover{
     background-color: #1890FF;
    color: #fff;
    border: none;
    opacity: .9;
    border-radius: 6px !important; 
}
.delete-one{
    background-color: ff4141 !important;
    margin-left: 15px;
    border-radius: 6px;
    height: 34px;
}
.sreachs{
       background-color: #1890FF;
    color: #fff;
    border: none;
    border-radius: 6px !important;
    margin-left: 15px;
    padding: 7px 15px; 
}
.type_explode{
    color: #fff;
    background-color: #d9534f;
    border-radius: 6px;
    border: none;
}


/* 颜学军弹窗部分样式需用 */
    .form-control {
        border-radius: 6px;
    }

    .table-body {
        width: 540px;
        height: 462px;
        border-radius: 6px;
        background-color: #eee;
    }

    .table-left {
        margin-right: 2%;
        width: 49%;
        height: 100%;
        float: left;
        border: 1px solid #eee;
        background-color: #fff;
    }

    .table-right,
    .table-right2 {
        width: 49%;
        height: 100%;
        border: 1px solid #eee;
        float: left;
        padding-top: 10px;
        background-color: #fff;
    }


</style>
<section class="content-header">
    <ol class="breadcrumb">
        <li>积分管理</li>
        <li class="active"> 事件库管理</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                {include file="form_search/search_activity" /}
                <div class="box-header with-border">
                    <div class="pull-left">
                        
                        <a href="{:url('activity')}" class="btn btn-sm task_nav_an task_nav_an_active"><i class="fa fa-save"></i> 查看事件列表</a>
                        <a href="{:url('activity_cate')}" class="btn btn-sm task_nav_an"><i class="fa fa-save"></i> 查看事件分类</a>
                        <!-- <a href="/company/integral/activity_cate" class="btn btn-sm btn-primary"><i class="fa fa-save"></i> 查看事件分类</a> -->
                        {:authAction(CONTROLLER_NAME.'/activity_edit','create')}
                        <button type="button" class="btn btn-sm btn-primary type_explode">导出</button>
                        {:authAction(CONTROLLER_NAME.'/activity_import','activity_import')}
                        <a href="__STATIC__/event_template.xlsx" class="btn btn-sm btn-primary">下载导入模板</a>

                        <a class="btn btn-primary plyd ydfl_bl_btn" href="javascript:void(0);" data-url="{:url('event_change')}" data-title="批量移动" ><i class="fa fa-check"></i> 批量移动</a>
                        <a class="btn btn-sm btn-danger delete-all" href="javascript:void(0);" data-url="/company/integral/activity_del" data-title="批量删除" ><i class="fa fa-trash"></i> 批量删除</a>

                    </div>
                </div>
                <div class="box-body table-responsive">
                    <table class="table table-bordered table-hover">
                        <tr>
                            <th width="35"><input type="checkbox" class="minimal checkbox-toggle"></th>
                            <th>分类</th>
                            <th>名称</th>
                            <th>A分</th>
                            <th>B分</th>
                            <th>创建时间</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        {volist name="$list" id="v"}
                        <tr>
                            <td><input type="checkbox" name="id[]" value="{$v.id}" class="minimal checkbox"></td>
                            <td>{if condition="!empty($v.p_cate_name)"}{$v.p_cate_name}/{/if}{$v["cate_name"]}</td>
                            <td>{$v["name"]}</td>
                            <td>{$v["integral_a_start"]}~{$v["integral_a_end"]}</td>
                            <td>{$v["integral_b_start"]}~{$v["integral_b_end"]}</td>
                            <td>{:date('Y-m-d H:i',$v["create_time"])}</td>
                            <td>{$v["desc"]}</td>
                            <td>
                                {:authAction(CONTROLLER_NAME.'/activity_edit','edit',['id'=>$v['id']])}
                                <a class="btn btn-primary onPopups-beizhu ydfl_btn" href="#" data-id="{$v.id}" data-content=""><i class="fa fa-edit"></i> 移动</a>
                                {:authAction(CONTROLLER_NAME.'/activity_del','delete_one',['id'=>$v['id']])}
                            </td>
                        </tr>
                        {/volist}
                    </table>
                </div>
                <div class="box-footer clearfix">
                    {$list->render()}
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 提交备注弹窗 -->
<div id="popups-beizhu" class="popups" style="display: none">
    <div class="content">
        <form class="layui-form remark_article" onsubmit="return false">
            <input type="hidden" name="id" value="" class="remark_id">
            <div class="form-group">
                <label class="col-sm-2 control-label">事件库类型</label>
                <div class="col-sm-7">
                    <select  class="form-control" name="type">
                        <option value="2">临时库</option>
                        <option value="1">正式库</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">上级分类</label>
                <div class="col-sm-7">
                    <select  class="form-control" name="cate_id">
                        {volist name='list_user' id='k'}
                        <option value="{$k.id}">{if condition="!empty($k.p_name)"}{$k.p_name}/{/if}{$k.name}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-form-item" style="margin: 0 auto; width: 91px;padding-top: 105px;">
                <div class="layui-input-block submit" style="margin-left:0px;">
                    <button class="layui-btn" id="remark" lay-submit lay-filter="formDemo">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- 提交备注弹窗  -->
<script>
    $(function(){
        // 列表部分 全选
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });
        $('.checkbox-toggle').on('ifChecked', function(event){
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("check");
        });
        $('.checkbox-toggle').on('ifUnchecked', function(event){
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("uncheck");
        });
    });

    //批量移动
    $('.plyd').on('click', function(){
        var $eventIds = [];
        $(".checkbox:checked").each(function(){
            $eventIds.push($(this).val());
        });
    });

</script>

<script>
    $('.type_explode').on('click',function () {
        window.location.href = "{:url('integral/activity')}?" + $('#export_form').serialize()+'&export=1';
        return false;
    });
</script>

<script>
    layui.use(['jquery','layer','form','upload'], function () {
        var $ = layui.$;
        var upload = layui.upload;
        var layer_index = '';//加载层

        //提交备注弹窗
        // $('.onPopups-beizhu').click(function(){
        //     var aa = $(this).attr('data-id');
        //     $('.remark_id').val(aa);
        //     var index = layer.open({
        //         type: 1,
        //         content: $('#popups-beizhu'),
        //         title: '移动库/类型',
        //         scrollbar: false,
        //         area: ['520px', '400px'],
        //         btnAlign: 'c',
        //         cancel: function () {
        //             //右上角关闭回调
        //         }
        //     });
        // });

        //导入人员
        upload.render({
            elem: '#import_staff'
            ,url: "{:url('integral/activity_import')}",
            accept:"file",
            exts:'xlsx',
            size:'8192', // 8M大小
            choose:function(obj){
                layer_index = layer.load(2);
            },
            done: function(res){
                layer.close(layer_index);
                if(res.err == 1){
                    // layer.msg(res.msg, {icon:2});
                    layer.open({
                        type: 1,
                        title:'错误信息',
                        skin: 'layui-layer-demo', //样式类名
                        closeBtn: 1, //不显示关闭按钮
                        anim: 2,
                        shadeClose: true, //开启遮罩关闭
                        content: res.msg
                    });
                }else{
                    layer.msg(res.msg, {icon:1}, function(){
                        location.reload();
                    });
                }
            }
            ,error: function(){
                layer.close(layer_index);
            }
        });


    });
    $('#remark').click(function () {

        var url =  "{:url('activity_move')}?" + $('.remark_article').serialize();
        $.post(url, {}, function(data){
                if(data.err==0){
                    layui.layer.closeAll('page');
                    layui.layer.msg(data.msg);
                    // $('#popup').hide();

                    window.location.reload();
                }else{
                    layui.layer.msg(data.msg);
                }
            }
        );
    });
</script>

<!-- 弹框样式引入 -->
<link rel="stylesheet" href="__STATIC__/global/an_tree_css/an_tree_css.css">
<!-- Modal 弹出层重写 事件分类选择  -->
<div class="modal fade myModal_things_type" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="height: 633px;width: 534px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel_things">事件分类选择</h4>
            </div>
            <div class="modal-body" style="width: 504px;">
                <div class="modal-left" style="width: 480px;">
                    <div class="modal-left-title" style="margin-bottom: 10px;">
                        <div class="input-group">
                            <input name="search_user_name" type="text" class="form-control" placeholder="">
                            <span class="input-group-btn">
                                <button class="btn btn-info search_btn" type="button"
                                        style="width: 47px; height: 34px; background-color: #1890FF;border: none;outline: none;">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="form-group sjklx_hidden">
                            <label class="col-sm-4 control-label" style="margin-bottom: 10px;text-align: center;">事件库类型：</label>
                            <div class="col-sm-6 radio" style=" display: flex;padding-top: 0;margin:0;">
                                <input class="minimal magic-radio" type="radio" id="is_move_type1" name="move_type" value="0" checked/>
                                <label for="is_move_type1" style="margin-right: 10px;">正式库</label>
                                <input class="minimal magic-radio" type="radio" id="is_move_type2" name="move_type" value="1" />
                                <label for="is_move_type2">临时库</label>
                            </div>
                    </div>
                    <div class="input-group table-body" style="width: 480px;">
                        <div class="table-left" style="width: 100%">
                            <div class="an_tree search_hide">

                            </div>
                            <div class="search_show" style="display: flex;  flex-direction: column;padding: 20px 10px;">

                            </div>
                        </div>
                       
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
<!-- 单选弹窗操作 事件分类选择  -->
<script>
    var now_item_name;//名字输入框
    var now_item_id;//id输入框
    var now_item_event_id = [];//事件id
    var is_move_type;//判断是移动分类，还是选择分类进行筛选
    //当弹窗关闭时执行重置弹窗
    $('.myModal_things_type').on('hidden.bs.modal', function () {
        // 执行一些动作...重置弹窗
        $(".an_tree_list .an_list_con").html("");
        $(".tree_txt_active").removeClass("tree_txt_active");
        $(".an_tree_pack").hide();
        $(".an_tree .fa").removeClass("fa-caret-down").addClass("fa-caret-right");
        $(".myModal_things_type input[name='search_user_name']").val("");
    });
    // 单个移动
    $('body').on('click','.ydfl_btn', function () {
        now_item_event_id = [];
        now_item_event_id.push($(this).attr("data-id"));
        is_move_type = true;
        $(".sjklx_hidden").show();
        $('.myModal_things_type').modal('show');
        // now_item_name = $(this);
        // now_item_id = $(this).siblings(".things_type_check_id");//节点
    });
    //批量移动
    $('body').on('click','.ydfl_bl_btn', function () {
        now_item_event_id = [];
        $(".checkbox:checked").each(function(){
            now_item_event_id.push($(this).val());
        });
        is_move_type = true;
        $(".sjklx_hidden").show();
        $('.myModal_things_type').modal('show');
    });
    $('body').on('focus','.things_type_check', function () {
        is_move_type = false;
        $(".sjklx_hidden").hide();
        now_item_name = $(this);
        now_item_id = $(this).siblings(".type_event_id");//节点
        $('.myModal_things_type').modal('show');
    });
</script>
<!-- 树结构js操作 事件分类选择  -->
<script>
    $(".myModal_things_type .an_tree").on("click", ".fa", function () {
        $(this).toggleClass("fa-caret-down");
        $(this).toggleClass("fa-caret-right");
        $(this).parents(".an_tree_set").eq(0).children(".an_tree_pack").toggle();
    });
    $(".myModal_things_type").on("click", ".an_tree_txt", function () {
        $('.myModal_things_type').modal('hide');
        // $(".things_type_check").val($(this).html());
        var now_item_cate_id = $(this).attr("data_id");
        var move_type = $("input[name='move_type']:checked").val();
        if(is_move_type){
            $.ajax({
                type: 'get',
                url: "{:url('event_change')}",
                data: {'id' : now_item_event_id , 'cate_id' : now_item_cate_id ,'type':"{:input('type',1)}","move_type" : move_type},
                dataType:"json",
                success: function (data) {
                    if(data.err==0){
                        layui.layer.msg("移动成功");
                        location.reload();
                    }else{
                        layui.layer.msg("操作失败");
                        location.reload();
                    }
                }
            });
        }else{
            now_item_name.val($(this).html());
            now_item_id.val(now_item_cate_id);
        }
    });
    $(".myModal_things_type").on("click", ".search_btn", function () {
        var item = $(".myModal_things_type .an_tree_txt");
        var search_name = $(".myModal_things_type input[name='search_user_name']").val();
        $(".myModal_things_type .search_show").html("");
        if(search_name == ""){
            $(".myModal_things_type .search_hide").show();
            $(".myModal_things_type .search_show").removeClass("an_tree");
        }else{
            $(".myModal_things_type .search_hide").hide();
            $(".myModal_things_type .search_show").show();
            var content = "";
            for (let i = 0; i < item.length; i++) {
                var name = item.eq(i).html();
                if (name.indexOf(search_name) != -1) {
                    content += item.eq(i).prop("outerHTML");
                }
            }
            $(".myModal_things_type .search_show").append(content)
        }
    })
</script>
<!-- 递归填充目录 事件分类选择  -->
<script>
    var eventList;
    $.ajax({
        type: 'get',
        url: "{:url('base/base_event_cate')}",
        dataType:"json",
        async: false,
        success: function (data) {
            eventList = JSON.parse(data);
        }
    })
    var an_tree = ergodic(eventList);
    $(".myModal_things_type .an_tree").append(an_tree);
    function ergodic(data) {
        var content = '';
        // console.log(data);
        $.each(data, function (index, value) {
            if (value.children != "") {
                var children = ergodic(value.children);
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"><i class="fa fa-caret-right"></i></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.name + '</span></div></div><div class="an_tree_pack">' + children + '</div></div>';
            } else {
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.name + '</span></div></div><div class="an_tree_pack"></div></div>';
            }
        });
        return content;
    }
</script>



{/block}
